import {Button, message} from "antd";
import {useState} from "react";
import TopicEdit from "./topicEdit";
import HttpRequestUtils from "../../utils/HttpRequestUtils";
import gengzpMqApis from "../../apis/apis";

const TopicList = (props) => {

    // 表头css
    const titleCss = {
        boxSizing: 'border-box',
        width: '15%',
        flexWrap: 'wrap',
        wordBreak: 'break-all',
        border: '1px solid #e8e8e8',
        minHeight: '50px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: '10px',
        paddingBottom: '10px',
        backgroundColor: '#fafafa'
    };

    // 列表内容css
    const listCss = {
        boxSizing: 'border-box',
        width: '15%',
        flexWrap: 'wrap',
        wordBreak: 'break-all',
        border: '1px solid #e8e8e8',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: '10px',
        paddingBottom: '10px'
    };

    const [messageApi, contextHodler] = message.useMessage();
    // 编辑主题modal
    const [topicEditModalVisible, setTopicEditModalVisible] = useState(false);
    // 当前操作的主题Modal信息
    const [currentTopicInfo, setCurrentTopicInfo] = useState({});

    /**
     * 打开编辑Modal
     */
    const openTopicEditModal = (topicInfo) => {
        setCurrentTopicInfo({
            id: topicInfo.id,
            topicName: topicInfo.topic,
            topicDescription: topicInfo.description,
            totalMessageCount: topicInfo.totalMessageCount,
            unConsumedMessageCount: topicInfo.unConsumedMessageCount,
            consumingMessageCount: topicInfo.consumingMessageCount,
            consumedMessageCount: topicInfo.consumedMessageCount,
            consumedFailMessageCount: topicInfo.consumedFailMessageCount,
            createdTime: topicInfo.createdTime,
            lastModifiedTime: topicInfo.lastModifiedTime
        });
        setTopicEditModalVisible(true);
    }

    /**
     * 关闭编辑modal
     */
    const closeTopicEditModal = () => {
        setTopicEditModalVisible(false);
        setCurrentTopicInfo({});
    }

    /**
     * 删除topic
     */
    const deleteTopic = (topicId) => {
        HttpRequestUtils.post(gengzpMqApis.deleteTopicById, {
            id: topicId
        }).then(res => {
            if (res.code === 200) {
                messageApi.success('操作成功');
                props.pageQueryTopic();
            } else {
                messageApi.error('操作失败' + res);
            }
        })
    }

    return (
        <div style={{width: '100%', overflowX: 'auto'}}>
            {contextHodler}

            <TopicEdit
                topicEditModalVisible={topicEditModalVisible}
                closeTopicEditModal={closeTopicEditModal}
                currentTopicInfo={currentTopicInfo}
                setCurrentTopicInfo={setCurrentTopicInfo}
                pageQueryTopic={props.pageQueryTopic}
            />

            <div style={{display: 'flex', marginTop: '10px', fontWeight: 'bolder'}}>
                <div style={titleCss}>主题名</div>
                <div style={titleCss}>描述</div>
                <div style={{...titleCss, width: '5%'}}>总消息数</div>
                <div style={{...titleCss, width: '5%'}}>未消费</div>
                <div style={{...titleCss, width: '5%'}}>消费中</div>
                <div style={{...titleCss, width: '5%'}}>消费成功</div>
                <div style={{...titleCss, width: '5%'}}>消费失败</div>
                <div style={{...titleCss, width: '15%'}}>创建时间</div>
                <div style={{...titleCss, width: '15%'}}>最后修改时间</div>
                <div style={{...titleCss, width: '15%'}}>操作</div>
            </div>

            {props.queryTopicInfo.topicList.length > 0 && props.queryTopicInfo.topicList.map((topic, index) => (
                <div
                    key={index}
                    style={{display: 'flex'}}
                >
                    <div style={listCss}>{topic.topic}</div>
                    <div style={listCss}>{topic.description}</div>
                    <div style={{...listCss, width: '5%'}}>{topic.totalMessageCount}</div>
                    <div style={{...listCss, width: '5%'}}>{topic.unConsumedMessageCount}</div>
                    <div style={{...listCss, width: '5%'}}>{topic.consumingMessageCount}</div>
                    <div style={{...listCss, width: '5%'}}>{topic.consumedMessageCount}</div>
                    <div style={{...listCss, width: '5%'}}>{topic.consumedFailMessageCount}</div>
                    <div style={{...listCss, width: '15%'}}>{topic.createdTime}</div>
                    <div style={{...listCss, width: '15%'}}>{topic.lastModifiedTime}</div>
                    <div style={{...listCss, width: '15%', display: 'flex'}}>
                        <div>
                            <Button
                                style={{borderColor: '#CC6600'}}
                                onClick={() => openTopicEditModal(topic)}
                            >
                                <span style={{color: '#CC6600'}}>编辑</span>
                            </Button>
                        </div>
                        <div style={{marginLeft: '20px'}}>
                            <Button
                                danger={true}
                                onClick={() => deleteTopic(topic.id)}
                            >
                                删除
                            </Button>
                        </div>
                    </div>
                </div>
            ))}

            {props.queryTopicInfo.topicList.length === 0 && (
                <div>
                    <div style={{margin: '10px'}}>
                        暂无数据
                    </div>
                </div>
            )}
        </div>
    );
};

export default TopicList;